import { ref } from 'vue';

/** 触摸函数 */
export function useTouch() {
  /** 方向 */
  const direction = ref<'horizontal' | 'vertical' | ''>('');
  /** 箭头 ↑ ↓ ← → */
  const arrow = ref<'up' | 'down' | 'left' | 'right' | ''>('');
  /** 原点X坐标 */
  const deltaX = ref<number>(0);
  /** 原点Y坐标 */
  const deltaY = ref<number>(0);
  /** 原点X坐标绝对值 */
  const offsetX = ref<number>(0);
  /** 原点Y坐标绝对值 */
  const offsetY = ref<number>(0);
  /** 开始X坐标 */
  const startX = ref<number>(0);
  /** 开始Y坐标 */
  const startY = ref<number>(0);

  /** 开始 */
  function touchStart(event: any) {
    const touch = event.touches[0];
    direction.value = '';
    arrow.value = '';
    deltaX.value = 0;
    deltaY.value = 0;
    offsetX.value = 0;
    offsetY.value = 0;
    startX.value = touch.clientX;
    startY.value = touch.clientY;
  }

  /** 移动 */
  function touchMove(event: any) {
    const touch = event.touches[0];
    deltaX.value = touch.clientX - startX.value;
    deltaY.value = touch.clientY - startY.value;
    offsetX.value = Math.abs(deltaX.value);
    offsetY.value = Math.abs(deltaY.value);
    direction.value =
      offsetX.value > offsetY.value
        ? 'horizontal'
        : offsetX.value < offsetY.value
          ? 'vertical'
          : '';

    if (direction.value === 'horizontal') {
      // 水平
      arrow.value = deltaX.value > 0 ? 'right' : deltaX.value < 0 ? 'left' : '';
    } else if (direction.value === 'vertical') {
      // 垂直
      arrow.value = deltaY.value > 0 ? 'down' : deltaY.value < 0 ? 'up' : '';
    }
  }

  return {
    /** 开始 */
    touchStart,
    /** 移动 */
    touchMove,
    /** 方向 */
    direction: computed(() => direction.value),
    /** 箭头 ↑ ↓ ← → */
    arrow: computed(() => arrow.value),
    /** 原点X坐标 */
    deltaX: computed(() => deltaX.value),
    /** 原点Y坐标 */
    deltaY: computed(() => deltaY.value),
    /** 原点X坐标绝对值 */
    offsetX: computed(() => offsetX.value),
    /** 原点Y坐标绝对值 */
    offsetY: computed(() => offsetY.value),
    /** 开始X坐标 */
    startX: computed(() => startX.value),
    /** 开始Y坐标 */
    startY: computed(() => startY.value),
  };
}
